<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>model</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
    <my-com3></my-com3>
</div>

<div id="app2">
    <login></login>
</div>

<!--在被控制的#app外面，使用template元素，定义组件的HTML模板结构-->
<template id="tmpl">
    <div>
        <h1>这是通过template元素，在外部定义的组件结构，这个方式，有代码的只能提示和高亮</h1>
    </div>
</template>

</body>
<script>
    // 注意： 不论是哪种方式创建出来的组件，组件的template属性指向的模板内容，必须有且只能有唯一的一个根元素
    Vue.component('myCom3', {
        template: '#tmpl'
    });

    var vm = new Vue({
        el: '#app',
        data: {
            msg: '大家好哈哈哈哈，你们好啊。'
        }

    })


    var vm2 = new Vue({
        el:'#app2',
        data: {},
        methods:{},
        directive: {},
        filters:{},
        components: {
            login: {
                template: '<h1>这是一个私有的login组件</h1>  '
            }
        }
    })
</script>
</html>